<template>
  <el-container>
    <el-container>
      <el-aside width="73%">
        <div class="main-table">
          <div class="filter-container">
            <el-date-picker
              v-model="listQuery.date"
              type="datetimerange"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right"
            />
            <el-select v-model="listQuery.equipmentNumber" style="width: 220px; margin-left: 20px;margin-top: 6px;" class="filter-item" placeholder="设备编号" @change="handleFilter">
              <el-option v-for="item in equipmentNumberOptions" :key="item.key" :label="item.label" :value="item.key" />
            </el-select>
            <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" style="margin-left: 20px;margin-top: 6px;" @click="handleFilter">
              查询
            </el-button>
            <el-button v-waves :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" style="margin-left: 20px;margin-top: 6px;" @click="handleDownload">
              导出
            </el-button>
          </div>
          <div class="main-table-body">
            <el-table
              ref="filterTable"
              :key="tableKey"
              v-loading="listLoading"
              :data="list"
              border
              fit
              highlight-current-row
              height="500"
            >
              <el-table-column
                label="上传时间"
                min-width="150px"
                align="center"
                prop="time"
                sortable
                column-key="time"
                :default-sort="{prop: 'time', order: 'descending'}"
              >
                <template slot-scope="{row}">
                  <span>{{ row.time }}</span>
                </template>
              </el-table-column>
              <el-table-column label="设备电量(%)" min-width="30px" align="center">
                <template slot-scope="{row}">
                  <span>{{ row.electricQuantity }}</span>
                </template>
              </el-table-column>
              <el-table-column label="通道1数据" min-width="30px" align="center">
                <template slot-scope="{row}">
                  <span>{{ row.i1 }}</span>
                </template>
              </el-table-column>
              <el-table-column label="通道2数据" min-width="30px" align="center">
                <template slot-scope="{row}">
                  <span>{{ row.i2 }}</span>
                </template>
              </el-table-column>
              <el-table-column label="通道3数据" min-width="30px" align="center">
                <template slot-scope="{row}">
                  <span>{{ row.i3 }}</span>
                </template>
              </el-table-column>
              <el-table-column label="通道4数据" min-width="30px" align="center">
                <template slot-scope="{row}">
                  <span>{{ row.i4 }}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <span style="margin-left: 100px;">总数：{{ total }}条</span>
        <!--   <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.amount" style="margin-left: 250px; margin-top: 30px" @pagination="getList" />-->
      </el-aside>

      <el-main width="27%">
        <div style="min-width: 20px">
          <el-card class="box-card">
            <div slot="header" class="box-card-header">
              <img src="https://wpimg.wallstcn.com/e7d23d71-cf19-4b90-a1cc-f56af8c0903d.png">
            </div>
            <div slot="header" class="clearfix text">
              <span><i class="el-icon-s-data" />设备信息</span>
            </div>
            <div class="text item">
              <span><i class="el-icon-coin" />设备编号:</span>
              <span class="content-text"> {{ equipmentNumber }}</span>
            </div>
            <div class="text item">
              <span><i class="el-icon-coin" />设备名称:</span>
              <span class="content-text"> {{ equipmentName }}</span>
            </div>
            <div class="text item">
              <span><i class="el-icon-top" />上传频率:</span>
              <span class="content-text"> {{ uploadFrequency }}</span>
            </div>
            <div class="text item">
              <span><i class="el-icon-delete-location" />所属省份:</span>
              <span class="content-text"> {{ province }}</span>
            </div>
            <div class="text item">
              <span><i class="el-icon-crop" />所属管线:</span>
              <span class="content-text"> {{ pipeline }}</span>
            </div>
            <div class="text item">
              <span><i class="el-icon-house" />所属站点:</span>
              <span class="content-text"> {{ site }}</span>
            </div>
            <div class="text item">
              <span><i class="el-icon-user" />负责人员:</span>
              <span class="content-text"> {{ principal }}</span>
            </div>
          </el-card>
        </div>
      </el-main>
    </el-container>
    <el-footer height="6px" />
  </el-container>
</template>

<script>
import { fetchList, fetchOptions } from '@/api/dataTable'
import waves from '@/directive/waves' // waves directive
import { parseTime } from '@/utils'
// import Pagination from '@/components/Pagination' // secondary package based on el-pagination
export default {
  directives: { waves },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      // 日期选择器
      pickerOptions: {
        disabledDate: time => {
          var isSelected = false
          if (this.selectDate !== '') {
            const one = 30 * 24 * 3600 * 1000
            const minTime = this.selectDate - one
            const maxTime = this.selectDate + one
            isSelected = time.getTime() <= minTime || time.getTime() > maxTime
          }
          return isSelected || time.getTime() > Date.now() - 8.64e6
        },
        shortcuts: [{
          text: '最近1小时',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 1)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近3小时',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 3)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近6小时',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 6)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近12小时',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 12)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近24小时',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 3)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      flag: false,
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        equipmentNumber: 'bd16265282985790001',
        date: null
      },
      temp: {
        time: '',
        electricQuantity: '',
        i1: '',
        i2: '',
        i3: '',
        i4: ''
      },
      dateString: '',
      lineChartData: null,
      equipmentNumber: '',
      equipmentName: '',
      uploadFrequency: '',
      province: '',
      region: '',
      site: '',
      pipeline: '',
      principal: '',
      dialogFormVisible: false,
      dialogStatus: '',
      dialogPvVisible: false,
      downloadLoading: false,
      provinceOptions: '',
      regionOptions: '',
      siteOptions: '',
      pipelineOptions: '',
      equipmentNumberOptions: ''
    }
  },
  created() {
    this.getList()
    this.getAllOptions()
  },
  methods: {
    formatter(row, column) {
      return row.address
    },
    // ...mapMutations('waiters', ['getname']),
    getList() {
      this.listLoading = false
      this.dateString = this.listQuery.date
      fetchList(this.listQuery).then(response => {
        this.list = response.data.items
        this.total = response.data.total
        this.equipmentNumber = response.data.equipmentNumber
        this.equipmentName = response.data.equipmentName
        this.uploadFrequency = response.data.uploadFrequency
        this.province = response.data.province
        this.region = response.data.region
        this.site = response.data.site
        this.pipeline = response.data.pipeline
        this.principal = response.data.principal
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
      this.flag = true
    },
    handleFilter() {
      this.getList()
    },
    handleDownload() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['time', 'electricQuantity', 'i1', 'i2', 'i3', 'i4']
        const filterVal = ['time', 'electricQuantity', 'i1', 'i2', 'i3', 'i4']
        const data = this.formatJson(filterVal)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: 'table-list'
        })
        this.downloadLoading = false
      })
    },
    formatJson(filterVal) {
      return this.list.map(v => filterVal.map(j => {
        if ((j === 'additionTime') || (j === 'patrolInspectionTime') || (j === 'onlineTime')) {
          return parseTime(v[j])
        } else {
          return v[j]
        }
      }))
    },
    getAllOptions() {
      fetchOptions().then(response => {
        this.equipmentNumberOptions = response.data.equipmentNumberOptions
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    }
  }
}
</script>

<style lang="scss">
  .text {
    font-size: 18px;
  }
  .item {
    margin-bottom: 18px;
    margin-left: 30px;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .box-card {
    min-height: 500px;
    min-width: 20px;
    background-color: rgba(54, 180, 189, 0.7);
  }
  .content-text {
    margin-left: 20px;
  }
  .pagination-container[data-v-72233bcd] {
    background: #fff;
    padding: 4px 0px;
}

.pagination-container {
    margin-top: 5px;
}
.main-table{
  min-height: 550px;
  .main-table-body{
    width: 100%;
  }
}
  .el-main-card{
    overflow-x: hidden;
  }
.box-card-header {
  margin-bottom: 5px;
  position: relative;
  min-height: 100px;
  img {
    padding: 5px;
    box-sizing: border-box;
    border-radius: 10px;
    width: 100%;
    height: 100%;
    transition: all 0.2s linear;
    &:hover {
      transform: scale(1.1, 1.1);
      filter: contrast(130%);
    }
  }
}
.el-main {
  padding: 0;
}
</style>
